﻿/*
    thinks to michael-laoyu. his blog is https://github.com/michael-laoyu and 
    http://www.jianshu.com/u/261606a3714c
*/

//自定义Overlay基类，组合模式包装ol.overlay
goog.provide('TyMapUtils.BaseOverlay');
TyMapUtils.BaseOverlay = function(options) {
    this.id = options.id;
    this.offset = options.offset;
    this.position = options.position;
    this.domElement = options.domElement;
    this.positioning = options.positioning ? options.positioning : 'top-left';
}

TyMapUtils.BaseOverlay.prototype.getHtmlElement = function() {
    return this.domElement;
}

TyMapUtils.BaseOverlay.prototype.createHtmlElement = function() {
    return this.domElement;
}

TyMapUtils.BaseOverlay.prototype.getOverlay = function() {
    return this.overlay;
}

TyMapUtils.BaseOverlay.prototype.getId = function() {
    return this.id;
}

TyMapUtils.BaseOverlay.prototype.createOverlay = function() {
    var this_ = this;
    this_.overlay = new ol.Overlay({
        id: this.id,
        position: this_.position,
        element: this_.createHtmlElement(),
        stopEvent: false,
        offset: this_.offset,
        positioning: this_.positioning
    });
    return this_.overlay;
}


TyMapUtils.BaseOverlay.prototype.setPosition = function(pos) {
    this.position = pos;
    if (this.overlay) {
        this.overlay.setPosition(pos);
    }
}

TyMapUtils.BaseOverlay.prototype.setOffset = function(offset) {
    this.offset = offset;
    if (this.overlay) {
        this.overlay.setOffset(offset);
    }
}


TyMapUtils.BaseOverlay.prototype.addEventListener = function(event, handler) {
    var this_ = this;
    if (this.overlay) {
        var dom = this.overlay.getElement();
        dom.addEventListener(event, function(e) {
            handler(e, this_);
        });
    }
}

TyMapUtils.BaseOverlay.prototype.removeEventListener = function(event, handler) {
    if (this.overlay) {
        var dom = this.overlay.getElement();
        dom.removeEventListener(event, handler);
    }
}

TyMapUtils.BaseOverlay.prototype.dispose = function() {
    if (this.overlay) {
        TyMap.getMap().removeOverlay(this.overlay);
    }
    var dom = this.getHtmlElement();
    $(dom).remove();
    this.overlay = null;
}

TyMapUtils.BaseOverlay.prototype.setFlag = function(obj) {
    this.flag = obj;
}

TyMapUtils.BaseOverlay.prototype.setContent = function(content) {
    $(this.domElement).empty();
    this.content = content;
    $(this.domElement).html(content);
}

//自定义Icon类
goog.provide('TyMapUtils.Icon');
goog.require('TyMapUtils.BaseOverlay');
TyMapUtils.Icon = function(url, size, iconOptions) {
    this.imageUrl = url;
    this.size = size;
    this.id = "icon_" + iconOptions.id;
    this.offset = iconOptions.offset;
    this.position = iconOptions.position;
    this.domElement = iconOptions.domElement;
    this.positioning = iconOptions.positioning ? iconOptions.positioning : 'top-left';
}
goog.inherits(TyMapUtils.Icon, TyMapUtils.BaseOverlay);

TyMapUtils.Icon.prototype.createHtmlElement = function() {
    //<div class="Ol_Icon" style="position: absolute; margin: 0px; padding: 0px; width: 46px; height: 46px; overflow: hidden;">
    //<img style="display: block; border:none;margin-left:0px; margin-top:0px; " src="images/p2-1.png">
    //</div>
    if (!this.domElement) {
        var html = this.getInnerHtml();

        function createDom(html) {
            var dom = $(html).appendTo($("body"));
            return dom[0];
        }
        this.domElement = createDom(html);
    }
    return this.domElement;
}

TyMapUtils.Icon.prototype.getInnerHtml = function() {
    //<div class="Ol_Icon" style="position: absolute; margin: 0px; padding: 0px; width: 46px; height: 46px; overflow: hidden;">
    //<img style="display: block; border:none;margin-left:0px; margin-top:0px; " src="images/p2-1.png">
    //</div>
    if (!this.domElement) {
        var html = "<div class=\"Ol_Icon\" style=\"position: absolute; margin: 0px; padding: 0px; width: " + this.size[0] + "px; height: " + this.size[1] + "px; overflow: hidden;\">" +
            "<img style=\"display: block; border:none;margin-left:0px; margin-top:0px; left: " + this.offset[0] + "px; top: " + this.offset[0] + "px; \" src=\"" + this.imageUrl + "\">" +
            "</div>"
        return html;
    } else {
        return this.domElement.innerHtml;
    }
}

TyMapUtils.Icon.prototype.setImage = function(url) {
    this.imageUrl = url;
    $(this.domElement).children("img").attr('src', url);
}


//自定义Label类
goog.provide('TyMapUtils.Label');
goog.require('TyMapUtils.BaseOverlay');
TyMapUtils.Label = function(content, labelOptions) {
    var style = {
        border: "border:1px solid rgb(0, 0, 0)"
    };
    $.extend(style, labelOptions.style);
    this.id = "label_" + labelOptions.id;
    this.content = content; //可以是html
    this.offset = labelOptions.offset;
    this.position = labelOptions.position;
    this.style = style; /*backgroundColor,fontSize,fontName ,color, */
    this.domElement = labelOptions.domElement;
    this.positioning = labelOptions.positioning ? labelOptions.positioning : 'top-left';
}
goog.inherits(TyMapUtils.Label, TyMapUtils.BaseOverlay);

TyMapUtils.Label.prototype.createHtmlElement = function() {
    if (!this.domElement) {
        var html = this.getInnerHtml();

        function createDom(html) {
            var dom = $(html).appendTo($("body"));
            return dom[0];
        }
        this.domElement = createDom(html);
    }
    return this.domElement;
}

TyMapUtils.Label.prototype.getInnerHtml = function() {
    if (!this.domElement) {
        var html = "<label class=\"Ol_Label\"  style=\"position: absolute; -moz-user-select: none; display: inline; cursor: inherit; background-color: " + this.style.backgroundColor + "; " + this.style.border + "; padding: 1px; white-space: nowrap; font:" + this.style.fontSize + "  " + this.style.fontName + ",simsun,sans-serif; z-index: 80; color: " + this.style.color + "; left: " + this.offset[0] + "px; top: " + this.offset[1] + "px;\">" + this.content + "</label>"
        return html;
    } else {
        return this.domElement.innerHtml;
    }
}

//自定义marker类
//openlayers中的overlay是以dom为基础展现；
/*
markerOptions:
position/* ol.Coordinate
offset 	Array.<number> 	标注的位置偏移值。
icon 	Icon 	标注所用的图标对象。
label Label 标注所用的标签对象
enableMassClear 	Boolean 	是否在调用map.clearOverlays清除此覆盖物，默认为true。
title 	String 	鼠标移到marker上的显示内容。 
*/
goog.provide('TyMapUtils.Marker');
goog.require('TyMapUtils.BaseOverlay');
goog.require('TyMapUtils.Icon');
goog.require('TyMapUtils.Label');
TyMapUtils.Marker = function(markerOptions) {
    this.id = markerOptions.id;
    this.position = markerOptions.position;
    this.offset = markerOptions.offset;
    this.icon = markerOptions.icon;
    this.label = markerOptions.label;
    this.enableMassClear = markerOptions.enableMassClear ? markerOptions.enableMassClear : false;
    this.title = markerOptions.title;
    this.domElement = markerOptions.domElement;
    this.positioning = markerOptions.positioning ? markerOptions.positioning : 'top-left';
}
goog.inherits(TyMapUtils.Marker, TyMapUtils.BaseOverlay);

TyMapUtils.Marker.prototype.createHtmlElement = function() {
    var this_ = this;
    if (!this.domElement) {
        var html = "<span class=\"Ol_Marker\" style=\"position: absolute; padding: 0px; margin: 0px; border: 0px none; width: 0px; height: 0px; -moz-user-select: none;\"></span>"

        function createDom(html) {
            var marker = $(html).appendTo($("body"));
            if (this_.icon) {
                var icon = $(this_.icon.getInnerHtml());
                icon.appendTo(marker);
                this_.icon.domElement = icon[0];
            }
            if (this_.label) {
                var label = $(this_.label.getInnerHtml());
                label.appendTo(marker);
                this_.label.domElement = label[0];
            }
            return marker[0];
        }
        this_.domElement = createDom(html);
    }
    return this.domElement;
}

TyMapUtils.Marker.prototype.openInfoWindow = function(infoWnd) {
    if (this.overlay) {
        if (TyMap.currInfoWnd) {
            TyMap.currInfoWnd.setPosition(this.position);
            TyMap.currInfoWnd.setContent(infoWnd.content);
        } else {
            TyMap.getMap().addOverlay(infoWnd.createOverlay());
            infoWnd.setPosition(this.position);
            TyMap.currInfoWnd = infoWnd;
        }
    }
}

//popup InfoWindow
goog.provide('TyMapUtils.InfoWindow');
goog.require('TyMapUtils.BaseOverlay');
TyMapUtils.InfoWindow = function(content, inforWindowOptions) {
    this.content = content;
    if (inforWindowOptions) {
        this.domElement = inforWindowOptions.domElement;
        this.closedHandler = inforWindowOptions.closedHandler;
        this.zIndex = inforWindowOptions.zIndex ? inforWindowOptions.zIndex : 1000;
        this.width = inforWindowOptions.width;
        this.height = inforWindowOptions.height;
        this.positioning = inforWindowOptions.positioning ? inforWindowOptions.positioning : 'top-left';
    }
}
goog.inherits(TyMapUtils.InfoWindow, TyMapUtils.BaseOverlay);


TyMapUtils.InfoWindow.prototype.createOverlay = function(_opt) {
    var this_ = this;
    var opt = {
        position: this_.position,
        element: this_.createHtmlElement(), //document.getElementById('marker'),
        stopEvent: false,
        offset: this_.offset,
        autoPan: true, //the map is panned when calling setPosition, so that the overlay is entirely visible in the current viewport. The default is false.
        autoPanAnimation: {
            duration: 500 //持续时间
        },
        positioning: this_.positioning
    }
    if (_opt && $.isPlainObject(_opt)) {
        $.extend(true, opt, _opt);
    } else {
        $.extend(true, opt, this);
    }
    this_.overlay = new ol.Overlay(opt);
    return this_.overlay;
}




TyMapUtils.InfoWindow.prototype.createHtmlElement = function() {
    var this_ = this;
    if (!this_.domElement) {
        if ($('#popup').length > 0) {
            //判断popup元素是否存在；
            this.domElement = $('#popup')[0];
        } else {
            var html = "<div id=\"popup\" class=\"ol-popup\">" +
                "<a href=\"#\" id=\"popup-closer\" class=\"ol-popup-closer\"></a>" +
                "<div id=\"popup-content\"></div>" +
                "</div>";

            function createDom(html) {
                var dom = $(html).appendTo("body");
                return dom[0];
            }
            this.domElement = createDom(html);

            $('#popup').css("z-index", this_.zIndex);
            $('#popup').css("width", this_.width + "px");
            $('#popup').css("height", this_.height + "px");
            $('#popup-closer').click(function() {
                this_.dispose();
            });
        }
    }
    //$('#popup').show();
    $('#popup-content').html(this.content);

    return this.domElement;
}

TyMapUtils.InfoWindow.prototype.setContent = function(content) {
    $('#popup-content').empty();
    this.content = content;
    $('#popup-content').html(this.content);
}

TyMapUtils.InfoWindow.prototype.dispose = function() {
    goog.base(this, 'dispose');
    TyMap.currInfoWnd = null;
}